<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
</head>
<body>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            
        }
        html {
            height: 100%;

            background-position: center center;
            background-repeat: no-repeat;
            background-image: url(./表白墙.png);
            background-size: cover;
        }
        .container ,html{
            width: 100%;
            opacity: 82%;
            
        }
        h3 {
            text-align: center;
            padding: 30px 0;
            font-size: 24px;
            color: black;
        }
        p {
            text-align: center;
            color: aliceblue;
            padding: 5px 0;
        }
        .row {
            width: 400px;
            height: 50px;
            margin: 0 auto;

            display: flex;
            justify-content: center;
            align-items: center;
        }
        .row span{
            width: 100px;
            height: 40px;
            text-align:center;
            padding-right: 0px;

            font-size: 24px;
            color:  white;
        }
        .row input{
            width: 300px;
            height: 40px;
            border: 2px solid  rgb(100,180,255);
            border-radius: 5px;
            outline: 0;
            text-align: left;
            padding-left: 0px;
            margin-left: 0px;
            text-indent: 0.4em;
            font-size: 20px;

            color: rgb(255, 150, 180)
        }
        .row #submit{
            width: 200px;
            height: 40px;
            border-radius: 10px;
            font-size: 24px;
            border: 0px solid  rgb(255, 140, 160);
            background-color:  rgb(140,160,255);
            color:  aliceblue;
            line-height: 40px;
            margin-top: 8px;
        }
        .row #submit:active{
            background-color: rgb(255, 140, 160);
        }
        .oh {
            width: 100%;
            height: 30px;
            margin-top: 8px;

            font-size: 16px;
            color: white;
            text-align: center;
            line-height: 30px;
        }
    </style>
    <div class="container">
        <h3>"真的是"表白墙</h3>
        <p>输入后点击提交, 会将信息显示在表白按钮下方</p>
        <p>这是一个正经的表白墙，这真的不是一个表白墙</p>
        <p></p>
        <div class="row">
            <span>是谁:</span>
            <input type="text" value placeholder="大白">
        </div>
        <div class="row">
            <span>向谁:</span>
            <input type="text" value placeholder="小白">
        </div>
        <div class="row">
            <span>说:</span>
            <input type="text" value placeholder="你好">
        </div>
        <div class="row">
            <button id="submit">表白</button>
        </div>
    </div>

    <script src="./jquery3.6.0.js"></script>
    <script type="application/javascript" src="表白墙.js"></script>
<!--    <script>-->
<!--        //获取元素-->
<!--        let loveBtn = document.querySelector("#submit");-->

<!--        let adv = ["深情地", "温柔地", "随便地", "紧张地", "幽默地", "滑稽地", "开心地", ""];-->
<!--        //用户点击表白将表白记录显示在表白按钮下面-->
<!--        let record = [];-->
<!--        let i = 0;-->
<!--        getMessages();-->
<!--        loveBtn.onclick = function() {-->
<!--            //1.获取表白内容-->
<!--            let inputs = document.querySelectorAll("input");-->
<!--            let from = inputs[0].value;-->
<!--            let to = inputs[1].value;-->
<!--            let message = inputs[2].value;-->
<!--            //2.如果有一项内天为空，不处理-->
<!--            if (from == '' || to == '' || message == '') {-->
<!--                return;-->
<!--            }-->
<!--            //3.汇总表白语言-->
<!--            let n = adv.length;-->
<!--            let index = (Math.floor(Math.random() * 1000) + 1) % n;-->
<!--            let romAdv = adv[index];-->
<!--            let loveMess = from + romAdv + "对" + to + "说" + message;-->
<!--            record[i] = "留言" + (i+1) + ":" + loveMess;-->
<!--            //4.新建结点，插入表白记录-->
<!--            let div = document.createElement("div");-->
<!--            div.innerHTML = record[i];-->
<!--            div.className = 'oh';-->
<!--            let container = document.querySelector(".container");-->
<!--            container.appendChild(div);-->
<!--            i++;-->
<!--            //5.表白完，清空输入框-->
<!--            for (let j = 0; j < inputs.length; j++) {-->
<!--                inputs[j].value = '';-->
<!--            }-->
<!--            //6.构造ajax请求-->
<!--            let body = {-->
<!--                from: from,-->
<!--                to: to,-->
<!--                message: message,-->
<!--                //随机词-->
<!--                romAdv: adv[index]-->
<!--            }-->
<!--            $.ajax({-->
<!--                type: "post",-->
<!--                url:"message",-->
<!--                contentType:"application/json; charset=utf8",-->
<!--                data:JSON.stringify(body),-->
<!--                success:function(body){-->
<!--                    alert("表白成功！");-->
<!--                },-->
<!--                error:function() {-->
<!--                    alert("表白失败！");-->
<!--                }-->
<!--            });-->
<!--        }-->
<!--        function getMessages() {-->
<!--            $.ajax({-->
<!--                type: "get",-->
<!--                url: "message",-->
<!--                success: function(body) {-->
<!--                    let container = document.querySelector(".container");-->
<!--                    for (message of body) {-->
<!--                        let loveMess = message.from + message.romAdv + "对" + message.to + "说" + message.message;-->
<!--                        record[i] = "留言" + (i+1) + ":" + loveMess;-->
<!--                        let div = document.createElement("div");-->
<!--                        div.innerHTML = record[i];-->
<!--                        div.className = 'oh';-->
<!--                        container.appendChild(div);-->
<!--                        i++;-->
<!--                    }-->
<!--                }-->
<!--            });-->
<!--        }-->
<!--    </script>-->
</body>
</html>